<template>
  <div v-if="roomList.length > 3">
    <a-popover overlayClassName="room-popover">
      <template #content>
        <div class="room-popover-content">
          <div class="textcoloe" v-for="(room , index) in roomList" :key="index"
               @click.stop="roomClick( room, roomList, build_bind?.village?.id ) " >
            {{`${getBuildName((room?.build_name || room?.extra?.build_name), room)}${room.layer_name ? "-" + room.layer_name : ''}-${room.room_name}`}}
            <text v-if="index != roomList.length - 1">, </text>
          </div>
        </div>
      </template>
      <div class="theretext">
        <div class="textcoloe" v-for="(room , index) in roomList" :key="index"
             @click.stop="roomClick( room, roomList, build_bind?.village?.id ) " >
          {{`${getBuildName((room?.build_name || room?.extra?.build_name), room)}${room.layer_name ? "-" + room.layer_name : ''}-${room.room_name}`}}
          <text v-if="index != roomList.length - 1">, </text>
        </div>
      </div>
    </a-popover>
  </div>
  <div v-else>
    <div class="textcoloe" v-for="(room , index) in roomList" :key="index"
         @click.stop="roomClick( room, roomList, build_bind?.village?.id ) " >
      {{`${getBuildName((room?.build_name || room?.extra?.build_name), room)}${room.layer_name ? "-" + room.layer_name : ''}-${room.room_name}`}}
      <text v-if="index != roomList.length - 1">, </text>
    </div>
  </div>


  <!-- 房间详情 -->
  <RoomDrawer
    v-if="roomDetailVisible"
    :visible="roomDetailVisible"
    @cancel="roomDetailVisible = false"
    :maxRoomNumber="maxRoomNumber"
    :detail="roomDetail"
  />
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  defineAsyncComponent,
} from "vue";
const RoomDrawer = defineAsyncComponent(() =>
  import("@/components/village/RoomDrawer.vue")
);
import utils from "@/common/utils/utils";

export default defineComponent({
  name: "RoomBuildBindInRecord",
  components: {
    RoomDrawer,
  },
  props: {
    build_bind: {
      type: Object,
      default: () => {
        return {};
      },
    }
  },

  setup(props, { emit }) {
    const state = reactive({
      roomDetail: {},
      maxRoomNumber: 0,
      roomDetailVisible: false,
    });

    const roomList = computed(() => {
      return props?.build_bind?.room || [];
    });


    // 获取最大房源号
    const getMaxRoomNumber = (list) => {
      let max = 0;
      for (let room of list) {
        if (max < Number(room.room_number)) {
          max = Number(room.room_number);
        }
      }
      return max;
    };

    const roomClick = (room, room_list, village_id) => {
      let roomData = room;
      roomData.village_id = village_id;
      state.roomDetail = roomData;
      state.maxRoomNumber = getMaxRoomNumber(room_list);
      state.roomDetailVisible = true;
    };

    const getBuildName = (buildName, room) => {
      if (!buildName) {
        return utils.getBuildNameByBuildBind(room, props.build_bind);
      }
      return buildName;
    };

    return {
      ...toRefs(state),
      roomList,
      getBuildName,
      roomClick,
    };
  },
});
</script>

<style lang="less" scoped>

.theretext{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; //行数需设置
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.textcoloe{
  color: #1890ff;
  cursor: pointer;
}
.room-popover{
  .room-popover-content{
    width: 200px;
    max-height: 200px;
    overflow: hidden auto
  }
}
</style>
